<template>
	<!-- 已登录 -->
	<div v-if="isLogin">
		<!-- 用户信息 -->
		<div class="userinfo">
			<div>
				<image class="avatar" :src="avatar" />
			</div>
			<div>
				<span class="title">{{ user.name }}</span>
			</div>
		</div>
		<!-- 用户可以操作功能列表 -->
		<uni-list :border="false" style="padding: 20px;">
			<uni-list-item v-for="(item, i) of cellItems" :key="i" link :title="item.title" @click="onClick(item)" />
			<uni-list-item link @click="onClickLogout" title="退出登录" />
		</uni-list>
	</div>
	<!-- 未登录 -->
	<div v-else>
		<!-- 用户信息 -->
		<div class="userinfo">
			<div>
				<image class="avatar" :src="avatar_default" />
			</div>
			<div @click="onLogin">
				<span class="title u-line-1">登录 / 注册</span>
			</div>
		</div>
	</div>
</template>

<script>
	import { getStorageToken, getStorageUser, removeStorageToken } from "@/utils/storage.js"
	export default {
		data() {
			return {
				user: {},
				avatar_default: "/static/image/avatar_default.png",
				avatar: "",
				isLogin: false,
				cellItems: [{
						title: "我的订单",
						url: "/pages/order/orderList", // orderList
						img: "",
					},
					{
						title: "收货地址",
						url: "/pages/address/addressList", //addressList
						img: "", //
					},

					{
						title: "我的收藏",
						url: "/pages/working/working",
						img: "star",
					},
					{
						title: "个人资料",
						url: "/pages/user/profile", //profile
						img: "",
					},
					{
						title: "修改密码",
						url: "/pages/user/updatePwd", //updatePwd
						img: "",
					},
				],
			};
		},

		//初始页面数据
		onShow() {
			this.user = getStorageUser();
			if (this.user && this.user.avatar) {
				this.avatar = this.user.avatar;
			} else {
				this.avatar = this.avatar_default;
			}

			//判断是否用户登录，看Token是否为空
			let token = getStorageToken();
			this.isLogin = token ? true : false;
		},

		methods: {
			onLogin() {
				uni.navigateTo({ url: '/pages/user/login' })
			},
			onClick(item) {
				uni.navigateTo({
					url: item.url,
				});
			},
			//点击用户退出事件
			onClickLogout() {
				removeStorageToken();
				this.avatar = this.avatar_default;
				uni.showToast({
					title: '退出成功',
					icon: "success",
					duration: 2000
				});
				this.isLogin = false;

				uni.reLaunch({ url: '/pages/user/user' })

			},
		},
	};
</script>

<style lang="scss" scoped>
	.userinfo {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 10px;
		background: linear-gradient(90deg, #28a2ff, #ffd787);
		box-shadow: 0 0.1rem 0.25rem #f8e3c6;

		.avatar {
			width: 80px;
			height: 80px;
		}

		.title {
			padding-left: 20px;
			font-size: 24px;
			color: rgb(65, 16, 241);
		}
	}
</style>